<template>
  <!-- vue3页面 -->
  <div class="main">
    <div class="left">
      <a-card :bordered="false">
        <template #title>
          <a-tag color="red">精选留言</a-tag>
        </template>
        <a-list item-layout="vertical" size="large" :data-source="listData">
          <template #renderItem="{ item }">
            <a-list-item key="item.title">
              <a-list-item-meta
                :description="`${
                  item.title
                } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ${'2022-12-12'}`"
              >
                <template #title>
                  <p class="title" @click="emit('viewMessage', item)">
                    {{ item.description }}
                  </p>
                </template>
                <template #avatar
                  ><a-avatar :src="item.avatar" :size="60"
                /></template>
              </a-list-item-meta>
              <p class="content" @click="emit('viewMessage', item)">
                {{ item.content }}
              </p>
            </a-list-item>
          </template>
        </a-list>
      </a-card>
    </div>
    <div class="right">
      <a-card :bordered="false">
        <template #title>
          <a-tag color="blue">历史留言</a-tag>
        </template>
        <a-list size="small" :data-source="data">
          <template #renderItem="{ item }">
            <a-list-item><star-outlined />{{ item }}</a-list-item>
          </template>
        </a-list>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { StarOutlined } from "@ant-design/icons-vue";
const emit = defineEmits<{
  (e: "viewMessage", message: any): void;
}>();
const data: string[] = [
  "母猪的产后护理以及生活条件环境的分析以及规模，共同创建美好家园。“退订短信统一指令且由营销信息发送方承担资费”的建议",
  "Japanese princess to wed commoner.",
  "Australian walks 100km after outback crash.",
  "Man charged over missing wedding girl.",
  "Los Angeles battles huge wildfires.",
];
const listData: Record<string, string>[] = [
  {
    title: `呆龙`,
    avatar:
      "https://mp-c7d1b689-cd39-420a-83f9-733c744450c6.cdn.bspapp.com/VKCEYUGU-c7d1b689-cd39-420a-83f9-733c744450c6/39b38beb-1122-4b9c-a4d9-fbcf60c42d35.jpg",
    description: "要求公开规划计划的全部内容以及流程控制内容!",
    content:
      "您的建议已收到，感谢您对垃圾信息治理工作的关心和宝贵意见，我们将认真研究您的建议，公开规划计划的全部内容以及流程控制内容!,并把内容公开到公开列表中!",
  },
  {
    title: `呆龙`,
    avatar:
      "https://mp-c7d1b689-cd39-420a-83f9-733c744450c6.cdn.bspapp.com/VKCEYUGU-c7d1b689-cd39-420a-83f9-733c744450c6/39b38beb-1122-4b9c-a4d9-fbcf60c42d35.jpg",
    description: "将认真研究“退订短信统一指令且由营销信息发送方承担资费”的建议",
    content:
      "长子县森众燃气公司目前正在对谐和苑小区开展通气前的稳压工作。8月25日开始，按照该小区1至5号楼顺序，施工人员将逐户安装天然气管道，预计11月中旬完成684户的天然气通气工作。",
  },
  {
    title: `呆龙`,
    avatar:
      "https://mp-c7d1b689-cd39-420a-83f9-733c744450c6.cdn.bspapp.com/VKCEYUGU-c7d1b689-cd39-420a-83f9-733c744450c6/39b38beb-1122-4b9c-a4d9-fbcf60c42d35.jpg",
    description: "将认真研究“退订短信统一指令且由营销信息发送方承担资费”的建议",
    content:
      "长子县森众燃气公司目前正在对谐和苑小区开展通气前的稳压工作。8月25日开始，按照该小区1至5号楼顺序，施工人员将逐户安装天然气管道，预计11月中旬完成684户的天然气通气工作。",
  },
];
</script>

<style scoped lang="less">
.left {
  flex: 5;
  margin-right: 20px;
}
.right {
  flex: 2;
}
.main {
  display: flex;
}
:deep(svg) {
  vertical-align: middle;
  margin-right: 5px;
}
:deep(.ant-list-item) {
  padding: 5px 16px;
  overflow: hidden;
  text-overflow: ellipsis; // 超出显示'...'
  display: -webkit-box; // 将元素作为弹性伸缩盒子模型显示 。
  -webkit-line-clamp: 2; // 用来限制在一个块元素显示的文本的行数
  -webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式
}
.content {
  cursor: pointer;
  text-indent: 2em;
  transition: all 0.6s;
  &:hover {
    color: #1890ff;
  }
}
:deep(.ant-list-item-meta) {
  margin-top: 10px;
}
.title {
  cursor: pointer;
  font-weight: bold;
  transition: all 0.6s;
  &:hover {
    color: #1890ff;
  }
}
</style>
